<script>
import { payMethodList } from '@/constant/monthCard'

export default {
  name: 'cardForm',
  props: {
    controls: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      /* 收集添加或编辑月卡的数据 */
      formData: {
        // 车主姓名
        personName: '',
        //联系方式
        phoneNumber: '',
        // 车牌号码
        carNumber: '',
        // 车辆品牌
        carBrand: '',
        // 有效时间开始
        cardStartDate: '',
        // 有效时间结束
        cardEndDate: '',
        // 支付金额
        paymentAmount: '',
        // 支付方式
        paymentMethod: ''
      },
      /* 表单规则对象 */
      formRules: {
        personName: [
          { required: true, message: '请输入车主姓名', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }

        ],
        carNumber: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' }

        ],
        carBrand: [
          { required: true, message: '请输入车辆品牌', trigger: 'blur' }
        ],
        cardStartDate: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        cardEndDate: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        paymentAmount: [
          { required: true, message: '请输入支付金额', trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: '请选择支付方式', trigger: 'change' }
        ]
      },
      // 支付方式
      payMethodList
    }
  },
  methods: {
    /* 添加月卡的回调函数 */
    async addCard() {
      try {
        const addResult = await this.$store.dispatch('monthCard/addCard', this.formData)
        this.$message.success(addResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 编辑月卡的回调函数 */
    async editCard() {
      try {
        const editResult = await this.$store.dispatch('monthCard/editCard', this.formData)
        this.$message.success(editResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 查找月卡的回调函数 */
    async findCard(id) {
      try {
        const formData = await this.$store.dispatch('monthCard/findCardAPI', id)
        if (this.controls === 'edit') {
          this.formData = formData
        } else {
          formData.cardEndDate = ''
          formData.paymentAmount = ''
          formData.paymentMethod = ''
          this.formData = formData
        }
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 续费月卡的回调函数 */
    async renewCard() {
      try {
        const { cardStartDate, cardEndDate, paymentAmount, paymentMethod, carInfoId } = this.formData
        const renewResult = await this.$store.dispatch('monthCard/renewCard', { cardStartDate, cardEndDate, paymentAmount, paymentMethod, carInfoId })
        this.$message.success(renewResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击取消按钮的回调函数 */
    handleCancel() {
      this.$emit('cancel', false)
    },
    /* 点击重置按钮的回调函数 */
    handleReset() {
      this.formData.carInfoId = ''
      this.formData.rechargeId = ''
      this.$refs.formRef.resetFields()
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      const valid = await this.$refs.formRef.validate().catch(error => error)
      if (!valid) return
      try {
        if (this.controls === 'edit') {
          delete this.formData.cardStatus
          await this.editCard(this.formData)
        } else if (this.controls === 'add') {
          await this.addCard(this.formData)
        } else {
          await this.renewCard()
        }
        this.$emit('success', false)
      }catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    isRenew() {
      return this.controls === 'renew'
    }
  },
  emits: ['success', 'cancel']
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="车主姓名" prop="personName">
      <el-input size="small" placeholder="请输入车主姓名" v-model="formData.personName" :disabled="isRenew"></el-input>
    </el-form-item>
    <el-form-item label="车牌号码" prop="carNumber">
      <el-input size="small" placeholder="请输入车牌号码" v-model="formData.carNumber" :disabled="isRenew"></el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="phoneNumber">
      <el-input size="small" placeholder="请输入联系方式" v-model="formData.phoneNumber" :disabled="isRenew"></el-input>
    </el-form-item>
    <el-form-item label="车辆品牌" prop="carBrand">
      <el-input size="small" placeholder="请输入车辆品牌" v-model="formData.carBrand" :disabled="isRenew"></el-input>
    </el-form-item>
    <el-form-item label="开始日期" prop="cardStartDate">
      <el-date-picker size="small" type="date" placeholder="请选择开始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isRenew" v-model="formData.cardStartDate"></el-date-picker>
    </el-form-item>
    <el-form-item label="结束日期" prop="cardEndDate">
      <el-date-picker size="small" type="date" placeholder="请选择结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="formData.cardEndDate"></el-date-picker>
    </el-form-item>
    <el-form-item label="支付金额" prop="paymentAmount">
      <el-input size="small" placeholder="请输入支付金额" v-model="formData.paymentAmount"></el-input>
    </el-form-item>
    <el-form-item label="支付方式" prop="paymentMethod">
      <el-select size="small" placeholder="请选择支付方式" v-model="formData.paymentMethod">
        <el-option v-for="(item) in payMethodList" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="danger" @click="handleCancel">取消</el-button>
      <el-button size="small" type="warning" @click="handleReset">重置</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
